<template>
  <div>
    <h2>计算属性</h2>
    <input type="text" v-model.lazy="xing">
    <input type="text" v-model.lazy="ming">
    <input type="text" v-model.lazy="fullName">
  </div>
</template>

<script>
export default {
  data () {
    return {
      xing: '张',
      ming: '三'
    }
  },
  // data里面放数据；methods里面放方法；computed里面放计算属性
  computed: {
    // ----------------------- 函数格式的计算属性，只能调用，不能修改 ---------------------
    // 计算属性 () {
    //   return '计算的结果'
    // }
    // fullName () {
    //   return this.xing + this.ming
    // }

    // ---------------------- 如果需要修改计算属性的值，需要写成对象格式 -------------------
    fullName: {
      // 调用计算属性的时候，get就会执行
      get () {
        return this.xing + ' ' + this.ming
      },
      // 当修改计算属性的时候，set就会执行；形参表示修改后的值
      set (value) {
        let arr = value.split(' ') // ['张', '三']
        this.xing = arr[0]
        this.ming = arr[1]
      }
    }
  }
}
</script>

<style>

</style>